<template>
    <div class="view">
        <div class="list">
            <div class="logo">
                <img src="@/assets/image/logo-1024.png"/>
            </div>
            <div class="title">用户注册</div>
            <form>
                <div class="list-item">
                    <label><i>姓</i><i>名</i><i>:</i></label>
                    <div class="list-action">
                        <cube-input v-model="name" :clearable="true" @blur="inputBlur"></cube-input>
                    </div>
                </div>
                <div class="list-item">
                    <label><i>性</i><i>别</i><i>:</i></label>
                    <div class="list-action" @click="selectSex">{{sexText}}</div>
                </div>
                <div class="list-item">
                    <label><i>年</i><i>级</i><i>:</i></label>
                    <div class="list-action" @click="selectGrade">{{grade}}</div>
                </div>
                <div class="list-item">
                    <label><i>校</i><i>区</i><i>:</i></label>
                    <div class="list-action" @click="selectBranch">{{branchText}}</div>
                </div>
                <div class="list-item">
                    <label><i>手</i><i>机</i><i>号</i><i>:</i></label>
                    <div class="list-action">
                        <cube-input :maxlength="11" v-model="mobile" :clearable="true" @blur="inputBlur"></cube-input>
                    </div>
                </div>
                <div class="list-item">
                    <label><i>验</i><i>证</i><i>码</i><i>:</i></label>
                    <div class="list-action">
                        <cube-input class="input-code" :maxlength="6" v-model="validcode" @blur="inputBlur"></cube-input>
                        <div class="send-code-btn" @click="sendCode">{{sendText}}</div>
                    </div>
                </div>
                <div class="list-item">
                    <label><i>密</i><i>码</i><i>:</i></label>
                    <div class="list-action">
                        <cube-input v-model="password" type="password" :eye="eye" @blur="inputBlur"></cube-input>
                    </div>
                </div>
            </form>
            <div class="btn">
                <div class="submit" @click="register">注 册</div>
            </div>
            <div class="new-user" @click="toLogin">
                已有账号？点击立即登录
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Model} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";


    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";
    import VerificationUnit from "@/unit/VerificationUnit";


    @Component({})
    export default class Register extends Scene {
        private clearable: object = {
            visible: true,
            blurHidden: true
        };
        private eye: object = {
            open: false,
            blurHidden: true
        };

        private name: string = "";
        private sex: string = "";
        private sexText: string = "";
        private grade: string = "";
        private branchcode: string = "";
        private branchText: string = "";
        private sendTime: number = 60;
        private mobile: string = "";
        private validcode: string = "";
        private password: string = "";

        private gradeList: Array<object> = [];
        private branchList: Array<object> = [];

        @State("UserStore")
        private user!: InterfaceUser;


        private inputBlur(): void {
            CommonUnit.windowSizeRecover();
        }

        private get sendText(): string {
            if (this.sendTime >= 60) {
                return "获取验证码";
            } else {
                return `${String(this.sendTime)}秒重发`;
            }
        }


        private get branchData(): object[] {
            const branchData: object[] = new Array();
            for (let brach of this.branchList) {
                const brachItem: any = new Object();
                brachItem.value = (brach as any).pid;
                brachItem.text = (brach as any).pname;
                brachItem.children = new Array();
                for (let data of (brach as any).xiaoqu) {
                    const item: any = new Object();
                    item.value = (data as any).id;
                    item.text = (data as any).br_name;
                    brachItem.children.push(item);
                }
                branchData.push(brachItem);
            }
            return branchData;
        }

        private mounted(): void {
            Http.get(this.api.getGradeList).then((res) => {
                this.gradeList = res.Data;
            });
            Http.get(this.api.getBranchList).then((res) => {
                this.branchList = res.Data;
            });

        }

        private selectSex(): void {
            (<any> this).$createActionSheet({
                title: "请选择请别",
                data: [
                    {
                        content: "男",
                        sex: 1
                    },
                    {
                        content: "女",
                        sex: 2
                    }
                ],
                onSelect: (item: any, index: number) => {
                    this.sexText = item.content;
                    this.sex = item.sex;
                }
            }).show();
        }

        private selectGrade(): void {
            (<any> this).$createPicker({
                title: "请选择年级",
                data: [this.gradeList],
                alias: {
                    value: "cl_clid",
                    text: "cl_name"
                },
                onSelect: (val: any[], index: number, text: string[]) => {
                    this.grade = text.join("");
                }
            }).show();
        }

        private selectBranch(): void {
            (<any> this).$createCascadePicker({
                title: "请选择学区",
                data: this.branchData,
                onSelect: (val: any[], index: number, text: string[]) => {
                    this.branchText = text.join("-");
                    this.branchcode = val[1];
                }
            }).show();
        }

        private register(): void | boolean {
            CommonUnit.windowSizeRecover();
            let nullCount: number = 0;
            const data: any = new Object();
            data.mobile = this.mobile;
            data.sex = this.sex;
            data.name = this.name;
            data.grade = this.grade;
            data.validcode = this.validcode;
            data.branchcode = this.branchcode;
            data.password = this.password;
            for (let key in data) {
                if (data[key] === "") {
                    nullCount++;
                }
            }
            if (nullCount > 0) {
                (<any> this).$createToast({
                    txt: "请完整填写注册信息",
                    type: "error"
                }).show();
                return false;
            }
            let toast = (<any> this).$createToast({
                txt: "注册中，请稍后...",
                mask: true,
                time: 0
            });
            toast.show();
            Http.post(this.api.register, {}).then((res) => {
                if (res.Success) {
                } else {
                    toast = (<any> this).$createToast({
                        txt: `登录失败：${res.Message}`,
                        mask: true,
                        type: "error",
                        time: 1500
                    });
                    toast.show();
                }
            });
        }

        private sendCode(): void {
            CommonUnit.windowSizeRecover();
            if (VerificationUnit.phone(this.mobile)) {
                Http.get(this.api.checkMobile, {mobile: this.mobile}).then((res) => {
                    if (res.Success) {
                        if (this.sendTime === 60) {
                            this.sendTime = this.sendTime - 1;
                            const sendBtnTimer: any = setInterval(() => {
                                this.sendTime = this.sendTime - 1;
                                if (this.sendTime === 0) {
                                    this.sendTime = 60;
                                    clearInterval(sendBtnTimer);
                                }
                            }, 1000);
                            Http.get(this.api.getSmsCode, {mobile: this.mobile}).then((res) => {
                                if (!res.Success) {
                                    this.sendTime = 60;
                                    clearInterval(sendBtnTimer);
                                    (<any> this).$createToast({
                                        txt: res.Message,
                                        type: "error"
                                    }).show();
                                }
                            });
                        }
                    } else {
                        (<any> this).$createToast({
                            txt: res.Message,
                            type: "error"
                        }).show();
                    }
                });

            } else {
                (<any> this).$createToast({
                    txt: "输入的手机号有误，请确认输入",
                    type: "error"
                }).show();
            }

        }

        private toLogin(): void {
            this.redirectTo({
                name: "login"
            });
        }

    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .view
        min-height 100vh;
        overflow hidden;
        background linear-gradient(to bottom, #fd9126, #FECF9F)

    .logo
        width 60px;
        height 60px;
        padding 5px;
        margin 10px auto 0 auto;
        overflow hidden;
        border-radius 60px;
        background #fff;
        opacity .9;

        img
            width 50px;
            height 50px;


    .title
        height 30px;
        line-height 30px;
        text-align center;
        font-size 15px;
        margin 10px auto;
        color #fff;

    .list
        border-radius 12px;
        margin calc(20px + env(safe-area-inset-bottom)) 23px 0 20px;
        padding 20px;
        background rgba(255, 255, 255, .5);

        .list-item
            background #fff;
            line-height 41px;
            margin-top 1px;
            height 41px;
            overflow hidden;
            display flex;
            justify-content space-between;
            position relative;

            &:first-child
                margin-top 0;
                border-top-left-radius 8px;
                border-top-right-radius 8px;

            &:last-child
                border-bottom-left-radius 8px;
                border-bottom-right-radius 8px;

            label
                width 80px;
                padding 0 10px;
                box-sizing border-box;
                display flex;
                flex-direction row;
                justify-content space-between;

                i
                    font-style normal;

            .list-action
                width calc(100% - 90px);
                display flex;
                flex-direction row;
                justify-content space-between;
                align-items center;

                .input-code
                    width 100px;

                .send-code-btn
                    width 80px;
                    margin-right 10px;
                    height 30px;
                    line-height 30px;
                    font-size 12px;
                    color #fff;
                    text-align center;
                    border-radius 30px;
                    background $theme-thin-color;

                /deep/ .cube-input
                    font-size 16px
                    height 39px;
                    overflow hidden;

                    /deep/ input
                        padding-left 0;

                    &::after
                        border none;

    .other
        margin auto
        margin-top 22px
        height 14px
        width 329px
        justify-content space-between
        display flex

        a
            color #555
            font-size 14px

    .btn
        margin auto
        margin-top 35px
        display flex
        flex-flow row nowrap
        justify-content space-between
        position relative

        .submit
            background $theme-common-gradient
            color #fff
            line-height 45px
            height 45px
            border-radius 45px
            font-size 16px
            width 100%
            text-align: center;
            box-shadow: 0 3px 6px #f7c7b1;

    .new-user
        margin-top 15px;
        font-size 15px;
        color #000;
        text-align center;
        height 25px;
        line-height 25px;

    .authentication
        display flex
        flex-direction row;
        justify-content space-between;
        margin 20px auto
        width 229px

        .icon
            flex 1;
            text-align center
            border-radius 40px
            line-height 40px
            color #fff


            i
                font-size 26px;
                display block;
                width 40px
                height 40px
                border-radius 40px
                margin auto;

</style>
